<!--
 * @Author: g05047
 * @Date: 2021-06-11 17:51:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-22 09:31:18
 * @Description: file content
-->
<template>
  <div>
    <a-modal :visible="laborModal" title="新建劳资纠纷" width="640px" @ok="handleOk" @cancel="handleCancel">
      <a-form-model ref="labor" layout="vertical" class="form-labor">
        <a-form-model-item label="雇员和企业信息" prop="makeUpMonth">
          <a-select show-search :filter-option="false" v-model="laborState.keyword" placeholder="手机号/身份证号" option-label-prop="label" @search="onSearchInfo" @change="onChangeInfo">
            <a-select-option v-for="(item, index) in infoList" :key="item.employeeId + '--' + index" :label="item.mobile" allow-clear>
              <a-descriptions title=" " :column="2">
                <a-descriptions-item label="雇员姓名">{{ item.employeeName }}</a-descriptions-item>
                <a-descriptions-item label="手机号码">{{ item.mobile }}</a-descriptions-item>
                <a-descriptions-item label="身份证号">{{ item.idCard }}</a-descriptions-item>
                <a-descriptions-item label="所属项目">{{ item.projectName }}</a-descriptions-item>
                <a-descriptions-item label="所属企业">{{ item.companyName }}</a-descriptions-item>
              </a-descriptions>
            </a-select-option>
          </a-select>
          <a-card class="card-select" v-if="laborState.employeeId">
            <a-icon type="close" style="position:absolute;right:24px" @click="onClose" />
            <a-descriptions title=" " :column="2">
              <a-descriptions-item label="雇员姓名">{{ info.employeeName }}</a-descriptions-item>
              <a-descriptions-item label="手机号码">{{ info.mobile }}</a-descriptions-item>
              <a-descriptions-item label="身份证号">{{ info.idCard }}</a-descriptions-item>
              <a-descriptions-item label="所属项目">{{ info.projectName }}</a-descriptions-item>
              <a-descriptions-item label="所属企业">{{ info.companyName }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-form-model-item>
        <a-form-model-item label="上传文件">
          <div class="clearfix">
            <a-upload list-type="picture-card" :file-list="fileList" :remove="onRemoveNotice" @preview="handlePreview" :action="get_OSS_config" :customRequest="handleChange">
              <div v-if="fileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelUrl">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-model-item>
        <a-form-model-item label="产生原因" prop="abnormal">
          <a-textarea v-model="laborState.memo" :max-length="300" :auto-size="{ minRows: 5 }" placeholder="请输入产生原因" allow-clear />
          <span style="position: absolute; right: 10px; bottom: 5px; color: #ccc; ">{{ laborState.memo.length }}/300</span>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getLaborInfo } from '@/services/labor.js';
import { get_OSS_config } from '@/services/api';
import { upLoadAliyun, idCardFn, regTest } from '@/utils/util';
export default {
  name: 'laborModal',
  props: {
    laborModal: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      get_OSS_config: get_OSS_config,
      laborState: {
        keyword: undefined,
        adviceNoteUrl: '',
        memo: '',
        employeeId: '',
      },
      infoList: [],
      info: {},
      loading: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
    };
  },
  methods: {
    onClose () {
      this.laborState.employeeId = ''
      this.laborState.keyword = undefined;
    },
    handleCancelUrl () {
      this.previewVisible = false;
    },
    handlePreview (file) {
      this.previewVisible = true;
      this.previewImage = file.url;
    },
    handleChange (info) {
      this.fileList = [];
      this.$message.warning('正在上传中......', 1)
      let fileType = info.file.name
      const type = fileType.substring(fileType.lastIndexOf('.'))
      if (!/\.(jpg|png)$/.test(type)) {
        this.$message.warning('只允许上传图片！')
        return;
      }
      upLoadAliyun(info).then(res => {
        this.laborState.adviceNoteUrl = res.filePath;
        this.fileList.push({ uid: '-3', name: 'adviceNoteUrl.png', status: 'done', url: res.filePath });
        this.$message.success('上传成功！')
      });
    },
    onRemoveNotice () {
      this.fileList = [];
      this.laborState.adviceNoteUrl = '';
    },
    onSearchInfo (value) {
      if (value.length == 11) {
        if (regTest.mobileReg(value)) {
          this.laborState.keyword = value.slice(0, 11);
          this.getLaborInfo({ keyword: value });
        }
      }
      if (value.length == 15) {
        if (regTest.idCardFifteen(value)) {
          this.laborState.keyword = value.slice(0, 15);
          this.getLaborInfo({ keyword: value });
        }
      }
      if (value.length == 18) {
        if (regTest.idCardEighteen(value)) {
          this.laborState.keyword = value.slice(0, 18);
          this.getLaborInfo({ keyword: value });
        }
      }
    },
    onChangeInfo (value) {
      const arr = value.split('--');
      this.laborState.employeeId = arr[0];
      this.info = this.infoList[arr[1]];
    },
    handleOk () {
      this.$emit('cancelModal', { str: 'ok', data: this.laborState });
    },
    handleCancel () {
      this.$emit('cancelModal', { str: 'cancel', data: '' });
    },
    /**
     * @description: 雇员和项目信息
     * @param {*}
     * @return {*}
     */
    getLaborInfo (params) {
      getLaborInfo(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.infoList = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.card-select {
  width: 100%;
  margin-top: 24px;
  border-radius: 5px;
}
.form-labor {
  /deep/ .ant-col.ant-form-item-label {
    label {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .avatar-uploader .adviceNoteUrl {
    width: 88px;
    height: 88px;
  }
}
</style>
